<template>
	<view class="turnBox">
		<HeaderNavTabarSvg :title="title">
			<image class="bukaSvg" src="/static/icon/auditSVG/buka.svg" @tap="goHistoryView"></image>
		</HeaderNavTabarSvg>
		
		<view class="turnPerson">
			<p class="turnPerson-p isrequired">加签审批人</p>
			<view v-if="perSon.nickName=='' " class="upload-box" @tap="escortsFn">
				<!-- 加号图标 -->
				      <view class="plus-icon">
				        <span class="plus-line horizontal"></span>
				        <span class="plus-line vertical"></span>
				      </view>
			</view>
			
			<view v-else class="upload-person">
			    <view class="img-box">
					<img v-if="perSon.headPhoto=='' "  class="img" :src="moren" alt="" />
			    	<img v-else class="img" :src=" baseUrl + perSon.headPhoto" alt="" />
			    </view>
			    <view class="person-name">
			    		{{perSon.nickName}}
			    </view>
			</view>
		</view>
		
		<view class="way">
			<view class="way-left isrequired">
				加签方式
			</view>
			<view class="way-right">
				 <view class="way-right-before" :class="beforeId==1? 'active' : '' " @click="before(1)">
				 	在我之前
				 </view>
				 <view class="way-right-later" :class="beforeId==2? 'active' : '' " @click="before(2)">
				 	在我之后
				 </view>
			</view>
		</view>
		
		<view v-if="beforeId==1" class="hint-before">
			<p>加签后，流程先经过加签审批人，再由我审批</p>
		</view>
		<view v-if="beforeId==2" class="hint-later">
			<p>加签后，流程先经过我审批，再由加签审批人审批</p>
		</view>
		
		<view class="textarea-box">
		  <text class="info-list-left">加签意见</text>
		  <textarea
		    v-model="OperatingPaymentsList.remark"
		    class="textinfo-list"
		    placeholder="填写加签意见"
		  ></textarea>
		</view>
		
		<!--    提交-->
		<view class="buttonContainer">
			<button class="buttonClass">确认加签</button>
		</view>
	</view>
</template>

<script setup>
	import HeaderNavTabarSvg from '@/components/HeaderNavTabarSvg/HeaderNavTabar.vue'
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import moren from '@/static/icon/tongxunlu/moren.png'
	
	const title = '加签'
	const baseUrl = 'http://123.53.123.80:33000/prod-api'
	const OperatingPaymentsList = ref({
	    remark:'',  //备注
	 })
	 //获取的选择人员
	 const perSon = ref({
	 		headPhoto:'',
	 		nickName:'',
	 		userId:'',
	 })
	const goHistoryView = () => {
		uni.navigateTo({
			url: '/components/TypeDefineModel?type=加班'
		})
	}
	const escortsFn = () => {
		uni.navigateTo({
			url: '/components/OptionDeptPerson/index?type=person&isDanXuan=1',
		})
	}
	//在我之前
	const beforeId = ref(1)
	const before = (val)=>{
		 beforeId.value = val
	}
	onShow(() => {
		// 监听事件 获取选择的人员
		uni.$on('getOptionPerson', (data) => {
			console.log(data,'人员data');
			data.forEach((v) => {	
					perSon.value.userId = v.userId,
					perSon.value.nickName = v.nickName,
					perSon.value.headPhoto = v.avatar
				
			})
		});
	
		// 监听事件 获取选择的部门
		// uni.$on('getOptionDept', (data) => {
		// 	console.log(data, '部门data')
		// 	ItemRequisitionList.value.deptName = optionDeptPerson.state.optionDept.label
		// 	ItemRequisitionList.value.deptId = optionDeptPerson.state.optionDept.depId
		// });
	})
	onUnload(() => {
		uni.$off('getOptionPerson');
	})
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';
.turnBox{
	background-color: #f5f6f8;
	.turnPerson{
		height: 200rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 15rpx;
		font-size: 32rpx;
		padding:18rpx 0 0 30rpx;
		.turnPerson-p{
			margin: 0 0 20rpx 0;
		}
		.upload-person{
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			.img-box{
				width: 100rpx;
				height: 100rpx;
				margin-right: 15rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.person-name{
				font-size: 35rpx;
			}
		}
	}
	.textarea-box {
  background: #fff;
  padding: 30rpx;
  // margin-top: 20rpx;

  .info-list-left {
    // @include font-color-auxiliary;
    color: #1d2129;
    font-size: $font-size-base;
  }

  .textinfo-list {
    margin-top: 20rpx;
    width: 100%;
    height: 300rpx;
  }
}
.buttonContainer {
		 .buttonClass {
		 		
		 		width: 90%;
		 		height: 80rpx;
		 		background: #165dff;
		 		border-radius: 16rpx;
		 		color: #fff;
		 		font-size: 32rpx;
		 		margin-top: 40rpx;
		 	}
	}
    .way{
		width: 100%;
		padding: 0 30rpx;
		background-color: #fff;
		height: 120rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.way-left{
			font-size: 32rpx;
		}
		.way-right{
			display: flex;
			.way-right-before{
				padding: 15rpx;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				font-size: 32rpx;
				margin-right: 15rpx;
			}
			.way-right-later{
				padding: 15rpx;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				font-size: 32rpx;
			}
		}
	}
	.hint-before{
		margin-left: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
	}
	.hint-later{
		margin-left: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
	}
	
}
.bukaSvg {
		width: 32rpx;
		height: 32rpx;
	}
.active{
	background-color: #c7ddff;
}
//文件上传样式
.upload-box {
  width: 100rpx;
  height: 100rpx;
  border: 2rpx dashed #d9d9d9;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fafafa;
  transition: all 0.3s ease;
  position: relative;
}

.upload-box:hover {
  border-color: #409eff;
}

.upload-box.is-dragover {
  border-color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

/* 加号图标样式 */
.plus-icon {
  position: relative;
  width: 30rpx;
  height: 30rpx;
  margin-bottom: 5rpx;
}

.plus-line {
  position: absolute;
  background-color: #8c8c8c;
  transition: all 0.3s ease;
}

.plus-line.horizontal {
  width: 100%;
  height: 2rpx;
  top: 50%;
  transform: translateY(-50%);
}

.plus-line.vertical {
  width: 2rpx;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.upload-box:hover .plus-line {
  background-color: #409eff;
}
</style>

